
<template>
  <el-card>
<!--    <template #header>-->
<!--    <h2>部门信息</h2>   -->
<!--    </template>-->
    <el-form :model="form" inline>
      <el-row>
          <el-col :span="10">
              <el-form-item label="地址：">
                  <el-cascader v-model="selectedVillage"
                               :options="villageOptions"
                               clearable="true"
                               :props="props1"
                               @change="handleCascaderChange"
                               style="width: 400px"
                  />
              </el-form-item>
          </el-col>
        <el-col :span="4">
      <el-form-item label="姓名：">
        <el-input v-model="form.farmerName" placeholder="" />
      </el-form-item>
        </el-col>
        <el-col :span="6">
      <el-form-item label="证件号码：">
        <el-input v-model="form.IDcard" placeholder="" />
      </el-form-item>
        </el-col>
      </el-row>
        <el-col>
                <el-form-item >
                <el-button type="success" @click="searchClick">查询</el-button>
               </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="resetClick">重置</el-button>
            </el-form-item>
        </el-col>
    </el-form>
  </el-card>
    <el-card style="height: 400px; margin-top: 20px">
  <div class="table-container" style="display: flex; flex-direction: column;">
  <el-table  :data="tableData" stripe border class="center-table" style="margin-top:20px;">
<!--  <el-table-column type="index" width="80" />-->
      <el-table-column prop="departmentid" label="序号" width="60" />
      <el-table-column prop="farmerName" label="姓名" width="100"/>
      <el-table-column prop="idCard" label="证件号码" width="200"/>
      <el-table-column prop="cityName" label="市" width="80" />
      <el-table-column prop="townName" label="县" width="80"/>
      <el-table-column prop="countyName" label="乡" width="80"/>
      <el-table-column prop="villageName" label="村" width="80"/>
      <el-table-column prop="medicare" label="医保情况" width="92"/>
      <el-table-column prop="water" label="水利情况" width="92"/>
      <el-table-column prop="housing" label="住房情况" width="92"/>
      <el-table-column prop="emergency" label="紧急灾难" width="92"/>
      <el-table-column prop="health" label="健康情况" width="92"/>
      <el-table-column prop="educate" label="教育情况" width="92"/>
    </el-table>
    <div style="display: flex; justify-content: flex-end;margin-top: 20px">
        <el-pagination
                :background=true
                v-model:total="totalCount"
                v-model:page-size="form.pageSize"
                :small=false
                :page-sizes="[5, 10, 20, 50]"
                @size-change="handleSizeChange"
                layout="sizes, prev, pager, next, jumper"
                @current-change="changePageNumber" />
    </div>
  </div>
    </el-card>
</template>

<script setup>
import {reactive, ref,onMounted,watch } from 'vue'
import {searchPage} from "@/api/department";
import villageData from "@/assets/village.json"; // 注意根据实际路径调整



const tableData = ref([]); // table数据
const villageOptions = villageData;
const selectedVillage = ref([]);
var requestData=ref([]);
const totalCount = ref(10);
const props1 = {
    checkStrictly: true,
}
const area_data = () =>{
    request_params.pageNum=form.pageNum
    request_params.pageSize=form.pageSize
    request_params.farmerName = form.farmerName;
    request_params.idCard = form.IDcard;
    for (let i=0;i<requestData.value.length;i++){
        switch (i) {
            case 0:
                request_params.cityName = requestData.value[i]['label']
                break;
            case 1:
                request_params.countyName = requestData.value[i]['label']
                break;
            case 2:
                request_params.townName = requestData.value[i]['label']
                break;
            case 3:
                request_params.villageName = requestData.value[i]['label']
                break;
        }
    }
}
const request_params = {
    farmerName:'',
    idCard:'',
    cityName:'',
    countyName:'',
    townName:'',
    villageName:'',
    pageNum: 1,
    pageSize: 10
}
const form = reactive({
    farmerName:'',
    IDcard: '',
    pageNum: 1,
    pageSize: 10
})
const searchClick=((res)=>{
    myPage();
});
const handleCascaderChange = (value, selectedLabels) => {
    if (value == null) {
        return;
    }
    requestData.value = value.map((val, index) => ({
        // level: index + 1, // 级数
        // value: val,       // 选中的值
        label: findLabelByValue(val,villageOptions), // 查找并添加对应的label
    }));
    console.log(selectedVillage.value);
};


// 辅助函数：根据value查找label
const findLabelByValue = (targetValue, options) => {
    for (const option of options) {
        if (option.value === targetValue) {
            return option.label;
        }
        if (option.children) {
            const foundLabel = findLabelByValue(targetValue, option.children);
            if (foundLabel) {
                return foundLabel;
            }
        }
    }
    return null;
};

onMounted(() => {
  myPage();
});

const changePageNumber = (pageNum) => {
    form.pageNum = pageNum;
    myPage();
}

const handleSizeChange = () => {
    myPage();
}

const myPage = () => {
    area_data();
  searchPage(request_params).then((res) => {
      console.log(res)
     tableData.value = res.data.list;
     totalCount.value = res.data.total;
  });

}
const resetClick = () => {
    request_params.pageNum=form.pageNum;
    request_params.pageSize=form.pageSize;
    request_params.farmerName = '';
    request_params.idCard = '';
    request_params.cityName = '';
    request_params.countyName = '';
    request_params.townName = '';
    request_params.villageName = '';
    searchPage(request_params).then((res) => {
        console.log(res)
        tableData.value = res.data.list;
        totalCount.value = res.data.total;
    });
}
</script>

<style scoped>
.el-select{
  width: 160px;
}

:deep(.center-table td),
:deep(.center-table th) {
  text-align: center !important;
}
</style>